<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title></title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/jquery.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/jquery.handsontable.full.js"></script>
	<link rel="stylesheet" media="screen" href="css/jquery.handsontable.full.css">
	<link rel="stylesheet" media="screen" href="css/style.css">
</head>
<body>

<div id="data" class="handsontable">

<fieldset id="form" style="margin: 20px 0; padding: 0;">
	<legend>生成图表</legend>
	<table>
		<tbody><tr>
			<td>类型:</td>
			<td>
				<select name="type">
					<option value="spline">曲线图</option>
					<option value="line">折线图</option>
					<option value="column" selected="selected">柱状图(竖柱)</option>
					<option value="bar">条形图(横条)</option>
					<option value="pie">饼图</option>
					<option value="area">面积图</option>
					<option value="scatter">XY 散点图</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>标题:</td>
			<td>
				<input type="text" name="title" value="标题" style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td>Y轴:</td>
			<td>
				<input type="text" name="ytitle" value="Y轴" style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td></td>
			<td><button>生成图表</button></td>
		</tr>
	</tbody></table>
</fieldset>

<div id="charts" style="width: 99%; margin: 0; padding: 0;" data-highcharts-chart="3">
	<div class="highcharts-container" id="highcharts-13" style="position: relative; overflow: hidden; width: 1097px; height: 400px; text-align: left; line-height: normal; z-index: 0; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; cursor: auto; ">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1097" height="400">
		<defs>
			<clipPath id="highcharts-14">
				<rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"></rect>
			</clipPath>
			<clipPath id="highcharts-15">
				<rect fill="none" x="0" y="0" width="1028" height="271"></rect>
			</clipPath>
		</defs>
		<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="1097" height="400" stroke-width="0.000001"></rect>
		<g class="highcharts-grid" zIndex="1"></g>
		<g class="highcharts-grid" zIndex="1">
			<path fill="none" d="M 59 266.5 L 1087 266.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
			<path fill="none" d="M 59 221.5 L 1087 221.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
			<path fill="none" d="M 59 176.5 L 1087 176.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
			<path fill="none" d="M 59 130.5 L 1087 130.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
			<path fill="none" d="M 59 85.5 L 1087 85.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
			<path fill="none" d="M 59 40.5 L 1087 40.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
			<path fill="none" d="M 59 311.5 L 1087 311.5" stroke="#C0C0C0" stroke-width="1" zIndex="1"></path>
		</g>
		<g class="highcharts-axis" zIndex="2">
			<path fill="none" d="M 572.5 311 L 572.5 316" stroke="#C0D0E0" stroke-width="1"></path>
			<path fill="none" d="M 829.5 311 L 829.5 316" stroke="#C0D0E0" stroke-width="1"></path>
			<path fill="none" d="M 1086.5 311 L 1086.5 316" stroke="#C0D0E0" stroke-width="1"></path>
			<path fill="none" d="M 315.5 311 L 315.5 316" stroke="#C0D0E0" stroke-width="1"></path>
			<text x="573" y="343" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#666;font-weight:bold;font-size:120%;fill:#666;" zIndex="7" text-anchor="middle" visibility="visible">
				<tspan x="573">X轴</tspan>
			</text>
			<path fill="none" d="M 59 311.5 L 1087 311.5" stroke="#C0D0E0" stroke-width="1" zIndex="7" visibility="visible"></path>
		</g>
		<g class="highcharts-axis" zIndex="2">
			<text x="27" y="175.5" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#666;font-weight:bold;font-size:120%;fill:#666;" zIndex="7" transform="rotate(270 27 175)" text-anchor="middle" visibility="visible">
				<tspan x="27">8</tspan>
			</text>
		</g>
		<g class="highcharts-series-group" zIndex="3">
			<g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="url(#highcharts-15)">
				<path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="black" stroke-width="5" zIndex="1" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="black" stroke-width="3" zIndex="1" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="black" stroke-width="1" zIndex="1" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1" stroke="#4572A7" stroke-width="2" zIndex="1"></path>
			</g>
			<g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="none">
				<path fill="#4572A7" d="M 899.5 14.100000000000001 C 904.828 14.100000000000001 904.828 22.1 899.5 22.1 C 894.172 22.1 894.172 14.100000000000001 899.5 14.100000000000001 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#4572A7" d="M 642.5 14.100000000000001 C 647.828 14.100000000000001 647.828 22.1 642.5 22.1 C 637.172 22.1 637.172 14.100000000000001 642.5 14.100000000000001 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#4572A7" d="M 128.5 113.4 C 133.828 113.4 133.828 121.4 128.5 121.4 C 123.172 121.4 123.172 113.4 128.5 113.4 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
			</g>
			<g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="url(#highcharts-15)">
				<path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="black" stroke-width="5" zIndex="1" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="black" stroke-width="3" zIndex="1" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="black" stroke-width="1" zIndex="1" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7" stroke="#AA4643" stroke-width="2" zIndex="1"></path>
			</g>
			<g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="none">
				<path fill="#AA4643" d="M 899.5 194.7 L 903.5 198.7 899.5 202.7 895.5 198.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#AA4643" d="M 642.5 194.7 L 646.5 198.7 642.5 202.7 638.5 198.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#AA4643" d="M 385.5 194.7 L 389.5 198.7 385.5 202.7 381.5 198.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#AA4643" d="M 128.5 149.6 L 132.5 153.6 128.5 157.6 124.5 153.6 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
			</g>
			<g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="url(#highcharts-15)">
				<path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="black" stroke-width="5" zIndex="1" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="black" stroke-width="3" zIndex="1" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="black" stroke-width="1" zIndex="1" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
				<path fill="none" d="M 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5" stroke="#89A54E" stroke-width="2" zIndex="1"></path>
			</g>
			<g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(59,40)" clip-path="none">
				<path fill="#89A54E" d="M 895.5 140.5 L 903.5 140.5 903.5 148.5 895.5 148.5 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#89A54E" d="M 638.5 140.5 L 646.5 140.5 646.5 148.5 638.5 148.5 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#89A54E" d="M 381.5 194.7 L 389.5 194.7 389.5 202.7 381.5 202.7 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
				<path fill="#89A54E" d="M 124.5 212.8 L 132.5 212.8 132.5 220.8 124.5 220.8 Z" stroke="#FFFFFF" stroke-width="0.000001" visibility="inherit"></path>
			</g>
		</g>
		<text x="549" y="25" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#3E576F;fill:#3E576F;" text-anchor="middle" class="highcharts-title" zIndex="4">
			<tspan x="549">标题</tspan>
		</text>
		<g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(59,40)">
			<g zIndex="1" style="" transform="translate(119,96)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">12</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(633,-3)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">23</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(890,-3)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">23</tspan>
				</text>
			</g>
		</g>
		<g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(59,40)">
			<g zIndex="1" style="" transform="translate(122,133)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">8</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(379,178)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">3</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(636,178)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">3</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(893,178)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">3</tspan>
				</text>
			</g>
		</g>
		<g class="highcharts-data-labels" visibility="visible" zIndex="6" transform="translate(59,40)">
			<g zIndex="1" style="" transform="translate(122,196)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">1</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(379,178)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">3</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(636,124)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">9</tspan>
				</text>
			</g>
			<g zIndex="1" style="" transform="translate(893,124)" visibility="inherit">
				<text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;line-height:14px;fill:#666;" zIndex="1">
					<tspan x="3">9</tspan>
				</text>
			</g>
		</g>
		<g class="highcharts-legend" zIndex="7" transform="translate(453,358)">
			<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="190" height="26" stroke-width="1" stroke="#909090" visibility="visible"></rect>
			<g zIndex="1" clip-path="url(#highcharts-14)">
				<g>
					<g class="highcharts-legend-item" zIndex="1" transform="translate(8,3)">
						<path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#4572A7"></path>
						<path fill="#4572A7" d="M 8 7 C 13.328 7 13.328 15 8 15 C 2.6719999999999997 15 2.6719999999999997 7 8 7 Z" stroke="#FFFFFF" stroke-width="0.000001"></path>
						<text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" text-anchor="start" zIndex="2">
							<tspan x="21">系列1</tspan>
						</text>
					</g>
					<g class="highcharts-legend-item" zIndex="1" transform="translate(69,3)">
						<path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#AA4643"></path>
						<path fill="#AA4643" d="M 8 7 L 12 11 8 15 4 11 Z" stroke="#FFFFFF" stroke-width="0.000001"></path>
						<text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" text-anchor="start" zIndex="2">
							<tspan x="21">系列2</tspan>
						</text>
					</g>
					<g class="highcharts-legend-item" zIndex="1" transform="translate(130,3)">
						<path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#89A54E"></path>
						<path fill="#89A54E" d="M 4 7 L 12 7 12 15 4 15 Z" stroke="#FFFFFF" stroke-width="0.000001"></path>
						<text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" text-anchor="start" zIndex="2">
							<tspan x="21">系列3</tspan>
						</text>
					</g>
				</g>
			</g>
		</g>
		<g class="highcharts-axis-labels" zIndex="7">
			<text x="187.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle">
				<tspan x="187.5">a</tspan>
			</text>
			<text x="444.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle">
				<tspan x="444.5">b</tspan>
			</text>
			<text x="701.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle">
				<tspan x="701.5">c</tspan>
			</text>
			<text x="958.5" y="325" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:237px;color:#666;line-height:14px;fill:#666;" text-anchor="middle">
				<tspan x="958.5">d</tspan>
			</text>
		</g>
		<g class="highcharts-axis-labels" zIndex="7">
			<text x="51" y="315.6" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">-5</tspan>
			</text>
			<text x="51" y="270.43333333333334" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">0</tspan>
			</text>
			<text x="51" y="225.26666666666668" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">5</tspan>
			</text>
			<text x="51" y="180.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">10</tspan>
			</text>
			<text x="51" y="134.93333333333334" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">15</tspan>
			</text>
			<text x="51" y="89.76666666666665" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">20</tspan>
			</text>
			<text x="51" y="44.6" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;width:494px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
				<tspan x="51">25</tspan>
			</text>
		</g>
		<g class="highcharts-tooltip" zIndex="8" style="padding:0;white-space:nowrap;" visibility="hidden" transform="translate(111,146.00726318359375)">
			<rect rx="5" ry="5" fill="none" x="0" y="0" width="66" height="26" stroke-width="5" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></rect>
			<rect rx="5" ry="5" fill="none" x="0" y="0" width="66" height="26" stroke-width="3" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></rect>
			<rect rx="5" ry="5" fill="none" x="0" y="0" width="66" height="26" stroke-width="1" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"></rect>
			<rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="66" height="26" stroke-width="2" fill-opacity="0.85" stroke="#4572A7" anchorX="77.88035025943091" anchorY="11.00726318359375"></rect>
			<text x="5" y="18" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" zIndex="1">
				<tspan x="5">系列1: 12</tspan>
			</text>
		</g>
		<text x="1087" y="395" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:10px;cursor:pointer;color:#909090;fill:#909090;" text-anchor="end" zIndex="8">
			<tspan x="1087">Highcharts.com</tspan>
		</text>
		<g class="highcharts-tracker" zIndex="9">
			<g visibility="visible" zIndex="1" transform="translate(59,40)" clip-path="url(#highcharts-15)">
				<path fill="none" d="M 118.5 117.4 L 128.5 117.4 C 128.5 117.4 436.9 18.1 642.5 18.1 C 745.3 18.1 899.5 18.1 899.5 18.1 L 909.5 18.1" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path>
			</g>
			<g visibility="visible" zIndex="1" transform="translate(59,40)" clip-path="url(#highcharts-15)">
				<path fill="none" d="M 118.5 153.6 L 128.5 153.6 C 128.5 153.6 282.7 198.7 385.5 198.7 C 488.3 198.7 539.7 198.7 642.5 198.7 C 745.3 198.7 899.5 198.7 899.5 198.7 L 909.5 198.7" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path>
			</g>
			<g visibility="visible" zIndex="1" transform="translate(59,40)" clip-path="url(#highcharts-15)">
				<path fill="none" d="M 118.5 216.8 L 128.5 216.8 C 128.5 216.8 282.7 213.16 385.5 198.7 C 488.3 184.24 539.7 144.5 642.5 144.5 C 745.3 144.5 899.5 144.5 899.5 144.5 L 909.5 144.5" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path>
			</g>
		</g>
	</svg>
	</div>
</div>

<script type="text/javascript">
<!--
var data = [
	["手机品牌", "三星", "苹果", "华为"],
	["中国", 45, 35, 20],
	["美国", 35, 40, 25],
	["俄罗斯", 40, 40, 20]
];


$(function(){
	$(document).ready(function() {
		var table = $('#data').handsontable({
			minRows: 7,
			minCols: 8,
			minSpareRows: 1,
			minSpareCols: 1,
			rowHeaders: true,
			colHeaders: true,
			data: data
		}).data('handsontable');

		$('button').click(function(){
			var datagrid = table.getData();
			var type = $('select[name=type]').val();
			var title = $('input[name=title]').val();
			var ytitle = $('input[name=ytitle]').val();
			show_chart(type, title, ytitle, datagrid);
			return false;
		}).click();
	});
});

function show_chart(type, title, ytitle, datagrid){
	var series = [];
	var xlabels = [];
	var xtitle = datagrid[0][0];

	for(i=1; i<datagrid[0].length-1; i++){
		var y = datagrid[0][i];
		if(y == '' || y == null){
			break;
		}
		series.push({
			name: y,
			data: []
		});
	}
	for(i=1; i<datagrid.length-1; i++){
		var x = datagrid[i][0];
		if(x == '' || x == null){
			break;
		}
		xlabels.push(x);
		for(j=1; j<datagrid[i].length-1; j++){
			if(datagrid[0][j].length == 0){
				continue;
			}
			var y = parseFloat(datagrid[i][j]);
			if(!isNaN(y)){
				series[j-1].data.push([x, y]);
			}else{
				series[j-1].data.push([x, null]);
			}
		}
	}
	var tmp = [];
	for(i=0; i<series.length; i++){
		if(series[i].data.length > 0){
			tmp.push(series[i]);
		//	alert(series[i].data);
		}
	}
	series = tmp;
	//alert(xlabels);
	//alert(series[0].data);

	$('#charts').html('');
	var charts = new Highcharts.Chart({
		chart: {
			renderTo: 'charts',
			type: type
		},
		title: {
			text: title
		},
		subtitle: {
			text: ''
		},
		xAxis: {
			title: {
				text: xtitle,
				style: {
					color: '#666',
					"font-size": '120%'
				}
			},
			categories: xlabels,
			min: 0, //
			//minRange: 1,
			minPadding: 1, //
			labels: {
				formatter: function() {
					return this.value + '';
				}
			}
		},
		yAxis: {
			title: {
				text: ytitle,
				style: {
					color: '#666',
					"font-size": '120%'
				}
			},
			labels: {
				formatter: function() {
					return this.value;
				}
			}
		},
		tooltip: {
			enabled: true,
			formatter: function() {
				return this.series.name + ': '+this.y +''; //
			}
		},
		plotOptions: {
			series:{
				connectNulls: true
			},
			line: {
				dataLabels: {
					enabled: true
				},
				enableMouseTracking: true
			},
			spline: {
				dataLabels: {
					enabled: true
				}
			},
			bar: {
				dataLabels: {
					enabled: true
				}
			},
			column: {
				dataLabels: {
					enabled: true
				}
			},
			area: {
				dataLabels: {
					enabled: true
				}
			},
			pie: {
				allowPointSelect: true,
				showInLegend: true,
				dataLabels: {
					enabled: true,
					formatter: function() {
						var p = this.percentage + '';
						var pos = p.indexOf('.');
						if(pos != -1){
							p = p.substr(0, pos + 2);
						}
						return '<b>'+ this.point.name +'</b>: ' + p +' %';
					}
				}
			}
		},
		series: series
	});
}

//-->
</script>

</body></html>